<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
	<script src="../../layuiadmin/layui/layui.js"></script>
</head>

<body>
	<!-- 主页面开始 -->
	<div class="layui-fluid" id="LAY-component-grid-list">
		<!-- 查询开始 -->
		<div class="layui-row layui-col-space10 demo-list">
			<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
				<div class="layui-card">
					<div class="layui-card-header">查询</div>
					<div class="layui-card-body" id="search-view">
						<form class="layui-form" action="" id="searchForm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">部门名称</label>
									<div class="layui-input-inline">
										<input type="text" name="depName" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label"></label>
									<div class="layui-input-inline">
										<button type="submit" class="layui-btn layui-icon layui-icon-search"
											lay-submit="" lay-filter="search">查询</button>
										<button type="reset"
											class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- 查询结束 -->
		<!-- 表格数据开始 -->
		<div class="layui-row layui-col-space10 demo-list">
			<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
				<div class="layui-card">
					<div class="layui-card-header">部门信息</div>
					<div class="layui-card-body">
						<table class="layui-table" id="dep-table" lay-filter="dataTable" lay-skin="line"
							style="text-align: center">

						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- 表格数据结束 -->
	</div>
	<!-- 主页面结束 -->
	<!-- 添加修改 弹出层开始 -->
	<div style="display: none;" id="addOrEditDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form" style="padding: 20px" action="">
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">部门编号</label>
					<div class="layui-input-block">
						<input type="text" name="depId" placeholder="请输入内容" class="layui-input" readonly>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-block">
					<label class="layui-form-label">部门名称</label>
					<div class="layui-input-block">
						<input type="text" name="depName" placeholder="请输入内容" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" align="center">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-sm layui-icon layui-icon-release" type="submit"
						lay-filter="doSubmit" lay-submit="">保存</button>
					<button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
						type="reset">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!--添加修改 弹出层结束 -->
	<!-- 表格工具条开始 -->
	<div id="table-toolbar" style="display: none" lay-filter="tableToolbar">
		<button type="submit" class="layui-btn layui-icon layui-icon-add-1" lay-event="add">添加</button>
		<button type="reset" class="layui-btn layui-btn-primary" lay-event="batchDelete">批量删除</button>
	</div>
	<!-- 表格工具条结束 -->
	<!-- 行工具开始 -->
	<script type="text/html" id="row-bar">
		<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="delete">删除</a>
	</script>
	<!-- 行工具结束 -->

	<script>
		layui.config({
			base: '../../layuiadmin/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use(["table", "jquery", "form", "layer", "element", "laypage"], function () {
			var laytpl = layui.laytpl;
			var $ = layui.$;
			var form = layui.form;
			var element = layui.element;
			var laypage = layui.laypage;
			var table = layui.table;
			var layer = layui.layer;

			// 表格渲染
			var tableIns = table.render({
				elem: "#dep-table",
				url: "/findDeps",
				method: "post",
				defaultToolbar: [],
				toolbar: "#table-toolbar",
				page: true,
				even: true,
				limit: 5,
				cols: [
					[{
						type: 'checkbox',
						fixed: 'left'
					}, {
						field: 'depId',
						title: '部门编号',
						width: 200,
						sort: true
					}, {
						field: 'depName',
						title: '部门',
						width: 200
					}, {
						toolbar: "#row-bar",
						title: '操作',
						width: 300
					}]
				],
				parseData: function (res) {
					console.log('获取所有的数据', res)
					return {
						"code": res.code == 200 ? 0 : res.code,
						"msg": res.msg,
						"count": res.count,
						"data": res.data
					}
				}
			})
			// 弹出层的索引
			var mainIndex;
			// 添加或修改的url
			var addOrEditUrl;
			/* 监听头部工具栏时间 */
			table.on("toolbar(dataTable)", function (obj) {
				switch (obj.event) {
					case "add":
						layer.msg("添加")
						openAdd()
						break;
					case "batchDelete":
						layer.msg("批量删除")
						batchDelete()
						break;
				}
			})
			/* 打开添加页面 */
			function openAdd() {
				mainIndex = layer.open({
					type: 1,
					title: '添加部门信息',
					maxmin: true,
					content: $("#addOrEditDiv"),
					success: function (index) {
						$("#dataForm")[0].reset();
						console.log($("#dataForm input[name='depId']").removeAttr('readonly'))
						addOrEditUrl = "/addDep";
					}
				});
			}
			// 行中工具条事件
			table.on('tool(dataTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

				if (layEvent === 'delete') { //删除
					layer.confirm('真的删除行么', function (index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						openDelete(data)
					});
				} else if (layEvent === 'edit') { //编辑
					openEdit(data);
				}

			});
			// 行中工具删除
			function openDelete(data) {
				console.log(data)
				$.post("/delDep", {
					'depId': data.depId
				}, function (res) {
					if (res.code == 200) {
						layer.msg("删除成功")
						tableIns.reload()
					} else {
						layer.msg("删除失败")
					}
				})
			}
			// 行中工具编辑
			function openEdit(data) {
				console.log('编辑的数据', data)
				mainIndex = layer.open({
					type: 1,
					title: '修改部门信息',
					content: $('#addOrEditDiv'),
					success: function (index) {
						form.val('dataForm', data);
						addOrEditUrl = '/updateDep';
					}
				})
			}
			//触发弹出层的更新或者添加按钮
			form.on("submit(doSubmit)", function (data) {
				console.log("----添加或更新", data)
				$.ajax({
					url: addOrEditUrl,
					//contentType: 'application/json;charset=utf-8',
					type: "post",
					data: data.field,
					success: function (res) {
						layer.msg("success")
						console.log(res)
						//关闭弹出层
						layer.close(mainIndex);
						tableIns.reload()
					}
				});
				return false;
			});
			// 条件查询
			form.on('submit(search)', function (data) {
				//alert(data.data)
				console.log(data.field)
				// 表格数据重载
				tableIns.reload({
					where: data.field
				})
				return false;
			})
		})
	</script>
</body>

</html>